<template>
  <div>
    <introCarousel></introCarousel>
    <section id="product">
      <ul>
        <li v-for="(item,index) in ProductItems" :key="index">
          <div class="container">
            <header class="section-header">
              <h3>{{item.title}}</h3>
              <p>{{item.introduction}}</p>
            </header>
            <div class="product-img">
              <img :src="item.imgsrc" class="img-fluid"></div>
          </div>
        </li>
      </ul>
    </section>
    <section id="homepage">
      <div class="row">
        <div class="col-lg-6" v-for="(item,index) in RecommendItems" :key="index">
          <div class="recommend">
            <img :src="item.imgsrc" class="img-fluid" alt="">
            <div class="recommend-info">
              <div class="recommend-info-content">
                <h4>{{item.title}}</h4>
                <h5>{{item.introduction}}</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="discount" :style="{backgroundImage: 'url(' + Discount.imgsrc + ')'}">
            <h4>{{Discount.title}}</h4>
            <h5>{{Discount.introduction}}</h5>
          </div>

        </div>
        <div class="col-lg-6">
          <div class="ordersearch" :style="{backgroundImage: 'url(' + OrderSearch.imgsrc + ')'}">
            <h4>{{OrderSearch.title}}</h4>
            <p>根据合同单号查询项⽬进度 本地库房项⽬，验证项⽬，发货进度</p>
            <div class="container searchinfo">

              <form>
                <div class="input-group">

                  <input type="text" name="name" class="form-control" id="name" placeholder="请输入订单号或设备编号">
                  <button type="submit">
                    <i class="iconfont icon-sousuo"></i>
                  </button>
                </div>
              </form>
            </div>
          </div>

        </div>
      </div>

    </section>
  </div>

</template>
 
<script>
import introCarousel from "@/components/common/introCarousel";
export default {
  components: {
    introCarousel
  },
  name: "Home",
  data() {
    return {
      ProductItems: [
        {
          title: "IST-TH11S_RS485通讯型温湿度变送器",
          introduction:
            "超低功耗及独特风道设计，防止电路温升, LCD大屏显示设计，大方美观",
          imgsrc: require("@/img/indeximg/pro1.png")
        }
        // {
        //   title: "通讯型温湿度变送器",
        //   introduction: "超低功耗及独特风道设计，防止电路温升, LCD大屏显示设计，大方美观",
        //   imgsrc: require("@/img/indeximg/pro2.png")
        // }
      ],
      RecommendItems: [
        {
          imgsrc: require("@/img/indeximg/arkit_large1.jpg"),
          title: "设备验证管理平台",
          introduction:
            "超低功耗及独特风道设计，防止电路温升, LCD大屏显示设计，大方美观"
        },
        {
          imgsrc: require("@/img/indeximg/arkit_large.jpg"),
          title: "冷云数据管理平台",
          introduction:
            "超低功耗及独特风道设计，防止电路温升, LCD大屏显示设计，大方美观"
        }
      ],
      Discount: {
        imgsrc: require("@/img/indeximg/arkit_large2.jpg"),
        title: "最新优惠活动",
        introduction:
          "超低功耗及独特风道设计，防止电路温升, LCD大屏显示设计，大方美观"
      },
      OrderSearch: {
        imgsrc: require("@/img/indeximg/arkit_large3.jpg"),
        title: "订单查询"
      }
    };
  },
  methods: {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
#product {
  position: relative;

  .product-img {
    text-align: center;
    padding-top: 30px;
  }
  .container {
    position: relative;
    z-index: 10;
    /* Sections Header*/
    .section-header {
      h3 {
        font-size: 36px;
        color: #111;
        text-transform: uppercase;
        text-align: center;
        font-weight: 700;
        position: relative;
        padding-bottom: 15px;
        padding-top: 117px;
        :before {
          content: "";
          position: absolute;
          display: block;
          width: 120px;
          height: 1px;
          background: #ddd;
          bottom: 1px;
          left: calc(50% - 60px);
        }
        :after {
          content: "";
          position: absolute;
          display: block;
          width: 40px;
          height: 3px;
          background: #18d26e;
          bottom: 0;
          left: calc(50% - 20px);
        }
      }
      p {
        text-align: center;
        padding-bottom: 30px;
        color: #333;
        font-size: 20px;
      }
    }
  }

  ul {
    width: 100%;

    li {
      display: block;
      width: 100%;
      padding-top: 12px;
    }
    li:nth-child(2) {
      background-color: #c1dde9;
    }
  }
}
#homepage {
  position: relative;
  padding-top: 12px;
  .col-lg-6 {
    padding-left: 6px;
    padding-right: 6px;
  }
  h4 {
    font-size: 25px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    position: relative;
    padding-top: 50px;
  }
  h5 {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
    padding-top: 20px;
  }
  .recommend {
    text-align: center;
    margin-bottom: 12px;
    background: #000;
    position: relative;
    overflow: hidden;
    img {
      height: 580px;
      max-width: 1262px;
    }
    .recommend-info {
      visibility: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      transition: 0.2s;
    }
    .recommend-info-content {
      margin-top: -30px;
      transition: margin 0.2s;
    }
  }
  .recommend:hover {
    .recommend-info {
      background: rgba(0, 0, 0, 0.7);
      visibility: visible;
      transition: 0.4s;
    }
    .recommend-info-content {
      margin-top: 0;
      transition: margin 0.4s;
    }
  }
  .discount {
    background-size: 1262px 580px;
    background-position-x: center;
    background-position-y: bottom;
    height: 580px;
    margin-bottom: 12px;
  }
  .ordersearch {
    background-size: 1262px 580px;
    background: rgba(0, 0, 0, 0.7);
    background-position-x: center;
    background-position-y: bottom;
    height: 580px;
    padding-top: 150px;
    margin-bottom: 12px;
    p {
      text-align: center;
      padding-top: 20px;
    }
    .searchinfo {
      padding-top: 30px;
      width: 80%;
      form input,
      form textarea {
        padding: 10px 14px;
        border-radius: 0;
        box-shadow: none;
        font-size: 15px;
      }
      form button[type="submit"] {
        background: #18d26e;
        border: 0;
        padding: 10px 30px;
        color: #fff;
        transition: 0.4s;
        cursor: pointer;
      }
      form button[type="submit"]:hover {
        background: #13a456;
      }
    }
  }
}
</style>
